<template>
    <div id="home-login">
    <topbar></topbar>
    <headbar :msg="hello"></headbar>
    <div class="change1">
        <div class="btn-group" role="group" aria-label="...">
            <button type="button" class="btn btn-default" @click.prevent="flag=true"><a href="">密码登录</a></button>
            <button type="button" class="btn btn-default" @click.prevent="flag=false"><a href="">验证码登录</a></button>
        </div>
    </div>
    <login1 v-if="flag"></login1>
    <login2 v-else></login2>
  </div>
</template>

<script>
import login1 from './login1';
import login2 from './login2';
import topbar from '../../common/topbar.vue';
import headbar from '../../common/headbar.vue';

export default {
    data(){
        return {
            flag: false,
            hello: '欢迎登录'
        }
    },
    components:{
        login1,
        login2,
        topbar,
        headbar
    }
    
}
</script>

<style scoped>
          .change1 {
            position: absolute;
            top: 200px;
            left: 910px;
        }
</style>